@import 'react-soundplayer/src/cssnext/icons.css';
@import 'react-soundplayer/src/cssnext/progress.css';
@import 'react-soundplayer/src/cssnext/cover.css';
@import 'react-soundplayer/src/cssnext/volume.css';

.b2 {
  border-width: 2px;
}

header {
  background-image: linear-gradient(45deg, var(--teal), rgba(0, 255, 127,.7));
  border-bottom: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
}

h2 a:hover {
  text-decoration: none;
}

.social-buttons {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.semibold {
  font-weight: 600;
}

.muted {
  opacity: .3;
}

.btn-small.btn-square {
  padding: .25rem .3rem;
}

.custom-track-bg::-webkit-slider-runnable-track {
  background-color: rgba(0, 0, 0, .25);
}
.custom-track-bg::-moz-range-track {
  background-color: rgba(0, 0, 0, .25);
}
.custom-track-bg::-ms-track {
  background-color: rgba(0, 0, 0, .25);
}
.custom-track-bg::-moz-range-thumb {
  background: #fff;
}
.custom-track-bg::-webkit-slider-thumb {
  background: #fff;
}
.custom-track-bg::-ms-thumb {
  background: #fff;
}

:root {
  --font-family: 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --container-width: 820px;
  --yellow: rgba(255, 220, 0, 0.45);
  --orange: #FC561E;
  --button-line-height: 1;
  --sb-progress-height: 8px;
  --button-big-padding-x: 1.25rem;
  --button-big-padding-y: 1.25rem;
}